<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="author" content="wangbo" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>淘宝焦点图</title>
    <!-- 引入外部样式,将页面内标签格式化 -->
    <link rel="stylesheet" href="./base.css">
    <!-- 内部样式,只对当前的样式生效 -->
    <style>
      /* 块元素水平居中 */
      .tb-promo{
        position: relative;
        width: 520px;height: 280px;
        margin: 100px auto;
      }
      .tb-promo img{
        width: 100%;
      }
      /* a标签,需要盖住父类的某些标签 */
      .tb-promo a{
        width: 20px;
        height: 30px;
        position: absolute;
        /* 只能左上角居中 */
        top:50% ; 
        /* 往上边移动元素高度的一半        */
        margin-top: -15px;
        /* 不透明的背景色 0-1之间 代表了透明的程度,1不透明,0透明
        rgba 透明色的背景
        */
        background-color: rgba(0, 0, 0, 0.3) ; 
        /* 设置字体,水平居中  */
        text-align: center;
        /* 字体垂直居中 行高 =标签的高 */
        line-height: 30px;
        color: #fff;
      }
      .prev{
        right: 0px;
        /* 宽高,谁比较淡,谁的一半 */
        border-top-left-radius: 15px;
        border-bottom-left-radius:15px ;        
      }
      /* 小于号 */
      .next{
        left: 0px;
        border-top-right-radius:15px ;
        border-bottom-right-radius: 15px;
      }
    </style>
	</head>
	<body>

		<div class="tb-promo">
				<img src="./tb.jpg" alt="" srcset="" />
				<!-- 当移动上去的时候,变成小手 a,span也可以,p不可以 -->
				<a href="#" class="prev">&gt; </a>
        <!-- 在html里边 <>必须包围标签 <p>
        html 特殊字母,来表示符号,必须有;谷歌能够兼容,搜狐  
        -->
				<a href="#" class="next"> &lt; </a>
				<ul class="promo-nav">
					<li class="selected"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
		</div>
	</body>
</html>
